<template>
  <view class="main">
    <h3>
      <view class="h3Main">
        <image src="../../assets/images/index/icon_success.png"></image>
        <text style="margin-left: 16rpx">取货成功</text>
      </view>
    </h3>
    <view class="demo-box">
      <nut-swiper :init-page="page" :loop="true" ref="swiper" :pagination-visible="true">
        <nut-swiper-item v-for="(item, index) in list" :key="index">
          <view class="tabItem">
            <view class="itemTop">
              <view class="itemTitle">
                <image src="../../assets/images/codeList/network_house.png"></image>
                <p>{{ item.destinationBranchName }}网点</p>
                <image src="../../assets/images/codeList/phone.png" @touchStart="toDial(item)"></image>
                <image src="../../assets/images/codeList/marker.png" style="margin-left: 32rpx" @touchStart="toMap(item)"></image>
              </view>
              <view class="billMsg" style="margin-top:32rpx">
                <view class="label">承运单号</view>
                <view class="value">
                  <view>{{item.billNo}}</view>
                  <view class="orderDetail" @click="toOrderDetail(item)">运单详情＞</view>
                </view>
              </view>
              <view class="billMsg">
                <view class="label">货物信息</view>
                <view class="value">
                  <view v-for="(goodItem,index) in item.goodsInfo" :key="index" class="value_goods">
                    {{
                      goodItem.goodsName
                    }}
                    <text style="color:#0966ff">（取{{goodItem.upNumber}}/剩{{goodItem.goodsNumber-goodItem.upNumber}}件）</text>
                    {{
                      goodItem.weigh +
                      "kg，" +
                      goodItem.goodsVolume +
                      "m³，" +
                      goodItem.packing
                    }}
                  </view>
                </view>
              </view>
            </view>
            <view class="itemFoot">
              <h4>取货码</h4>
              <h5>{{ item.pickUpCode }}</h5>
              <view class="itemFoot_btns">
                <view class="left_btn" @click="handleGoOn">继续取货</view>
                <view class="right_btn" @click="copy(item.pickUpCode)">复制取货码</view>
              </view>
            </view>
          </view>
        </nut-swiper-item>
      </nut-swiper>
<!-- 
      <nut-swiper :init-page="page" :loop="true" ref="swiper" :pagination-visible="true">
        <nut-swiper-item v-for="(item, index) in list" :key="index">
          <view class="tabItem">
            <view class="itemTop">
              <view class="itemTitle">
                <image src="../../assets/images/codeList/network_house.png"></image>
                <p>{{ item.destinationBranchName }}网点</p>
                <image src="../../assets/images/codeList/phone.png" @touchStart="toDial(item)"></image>
                <image src="../../assets/images/codeList/marker.png" style="margin-left: 32rpx" @touchStart="toMap(item)"></image>
              </view>
              <view class="billMsg" style="margin-top:32rpx">
                <view class="label">承运单号</view>
                <view class="value">
                  <view>{{item.billNo}}</view>
                  <view class="orderDetail" @click="toOrderDetail(item)">运单详情＞</view>
                </view>
              </view>
              <view class="billMsg">
                <view class="label">货物信息</view>
                <view class="value">
                  <view v-for="(goodItem,index) in item.goodsInfo" :key="index" class="value_goods">
                    {{
                      goodItem.goodsName
                    }}
                    {{
                      goodItem.weigh +
                      "kg，" +
                      goodItem.goodsVolume +
                      "m³，" +
                      goodItem.packing
                    }}
                  </view>
                </view>
              </view>
            </view>
            <view class="itemFoot">
                <view>代取人姓名：</view>
                <view>代取人手机号：</view>
                <view>代取人身份证号：</view>
              <view class="itemFoot_btns">
                <view class="left_btn" @click="handleGoOn">继续取货</view>
                <view class="right_btn" @click="copy(item.pickUpCode)">通知代取人</view>
              </view>
            </view>
          </view>
        </nut-swiper-item>
      </nut-swiper> -->

<!--      <view class="nut-swiper-btns" v-if="list.length > 1">-->
<!--        <span class="nut-swiper-btns__left" @click="handlePrev">-->
<!--          <Left></Left>-->
<!--        </span>-->
<!--        <span class="nut-swiper-btns__left" @click="handleNext">-->
<!--          <Right></Right>-->
<!--        </span>-->
<!--      </view>-->

    </view>

    <call-some :show="showCallSome" @close="closeCallSome"></call-some>

    <dialBranch :show="showTelPopup" :tel="branchTel" :title="'拨打电话'" @close="showTelPopup=false" :show-close="true"></dialBranch>
  </view>
</template>
<script lang="ts" setup>
import { reactive, toRefs, ref, Ref } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";
import {$get, $post, getBranchTel} from "@/@api";
import useUserInfoStore from "../../store/user";
import callSome from '@/components/callSome/index'
import dialBranch from "@/components/dialBranch/index"
import {
  Left,
  Right,
  Success,
  Shop,
  Location,
  Service,
} from "@nutui/icons-vue-taro";
import useTransactionStore from "@/store/pickUp";
import useMyOrderStore from "@/store/myOrder";
const userStore = useUserInfoStore();

const transactionStore = useTransactionStore();
const orderStore = useMyOrderStore();
const showCallSome = ref(false)

const swiper = ref(null) as Ref;
const list = ref(transactionStore.transactionList || []);
const page = ref(list.value.length)||0;
const billNos = ref(transactionStore.pickUpCode || []);

function handlePrev() {
  swiper.value.prev();
}
const handleNext = () => {
  swiper.value.next();
};
//复制取货码
function copy(item: any) {
  Taro.setClipboardData({
    //复制文本
    data: (item||'').toString(),
    success: function (res: any) {
      Taro.showToast({
        title: "复制成功",
        icon: "success",
      });
    },
  });
}


const showTelPopup = ref<boolean>(false)
const branchTel = ref<string>('')
const toDial = async (item) => {
  let res = await getBranchTel([{branchCompanyNo:item.destinationBranch}])
  if(res.code == 200 && res.data && res.data.length){
    branchTel.value = res.data[0].tel
    showTelPopup.value = true
  }
  else{
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
}

//跳转到网点定位
function toMap(item: any) {
  $get("/selfmachine-system/branch/particulars", {
    btcId: userStore.userInfo.customerCode,
    branchCompanyNo: item.destinationBranch,
  }).then((res: any) => {
    if (res.data.code == 200) {
      Taro.openLocation({
        longitude: Number(res.data.data.localX || res.data.data.lng),
        latitude: Number( res.data.data.localY || res.data.data.lat),
        scale: 11,
      });
    }
  });
}

//旧版找人代取弹窗
const handleCallSome = ()=>{
  showCallSome.value = true
}
const closeCallSome = ()=>{
  showCallSome.value = false
}
//继续取货
const handleGoOn = ()=>{
  Taro.navigateBack()
}


const toOrderDetail = (item)=>{
  orderStore.orderList = item
  Taro.navigateTo({
    url: "/pages/myOrder/order",
  })
}

useDidShow(async ()=>{

})



</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.main {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg,
      #0966ff,
      rgba(9, 102, 255, 0),
      rgba(9, 102, 255, 0) 100%,
      rgba(9, 102, 255, 0));

  h3 {
    text-align: center;
    color: #fff;
    display: flex;
    box-sizing: border-box;
    .h3Main {
      text-align: center;
      margin: 0 auto;
      display: flex;
      align-items: center;
      margin-top: 66rpx;
      font-size: 44rpx;
      image {
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
}

.demo-box {
  height: 660rpx;
  margin-top: 64rpx;
  position: relative;
  .nut-swiper {
    height: 100%;
  }
}

.nut-swiper-item {
  width: 100%;
  .tabItem {
    display: block;
    margin: 0 auto;
    width: 90%;
    min-height: 600rpx;
    background: white;
    border-radius: 8px 8px 8px 8px;

    .itemTop {
      box-sizing: border-box;
      min-height: 300rpx;
      border-bottom: 2rpx dashed rgba(219, 219, 219);

      .itemTitle {
        height: 88rpx;
        background: #cce0ff;
        border-radius: 8px 8px 0 0;
        display: flex;
        line-height: 88rpx;
        align-items: center;
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;

        p {
          flex: 1;
          font-size: 28rpx;
          margin-left: 16px;
        }

        .iconShop {
          line-height: 88rpx;
          height: 88rpx;
          width: 88rpx;
          font-weight: 600;
          color: #666666;
        }

        .iconFirlst {
          color: #0966ff !important;
        }

        image {
          width: 27rpx;
          height: 27rpx;
        }
      }

      .billMsg {
        width: 100%;
        display: flex;
        padding-left: 24rpx;
        margin-bottom: 24rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        line-height: 32rpx;
        .label {
          color: #666;
          width: 136rpx;
        }
        .value {
          width: calc(100% - 136rpx);
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .orderDetail {
            color: #0966ff;
            margin-left: 32rpx;
          }
          .value_goods {
            width: 100%;
          }
        }
      }

    }

    .itemFoot {
      text-align: center;
      height: 340rpx;
      width: 100%;
      h4 {
        margin-top: 48rpx;
        line-height: 48rpx;
        font-weight: 600;
        font-size: 32rpx;
      }
      h5 {
        font-size: 56rpx;
        color: #0966ff;
        line-height: 84rpx;
      }

      .itemFoot_btns {
        width: 100%;
        margin-top: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .left_btn {
          width: 240rpx;
          height: 80rpx;
          line-height: 78rpx;
          border-radius: 40rpx;
          box-sizing: border-box;
          border: 1rpx solid #c4c4c4;
          font-size: 24rpx;
          color: #666;
          text-align: center;
          margin-right: 16rpx;
        }
        .right_btn {
          width: 240rpx;
          height: 80rpx;
          line-height: 78rpx;
          border-radius: 40rpx;
          box-sizing: border-box;
          border: 1rpx solid #0966ff;
          font-size: 24rpx;
          color: #0966ff;
          text-align: center;
        }
      }

    }
  }
}

.nut-swiper-btns {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  justify-content: space-between;

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 80px;
    // background-color: rgba(0, 0, 0, 0.2);
  }
}</style>
